<script lang="ts" setup>
import {ref, onMounted, computed} from 'vue'
//Api工具类
import * as apiUtil from "@/api/ApiUtils"
//Api接口和类
import {SysDictVO, apiSave, apiGetDetail, apiTypeOptions,apiTree} from "@/api/SysDictApi"

// Props 和 Emits
const props = defineProps<{
  dataId: number | null
}>();

const emit = defineEmits<{
  (e: 'close'): void
  (e: 'successed'): void
}>();

/**
 * 表单数据
 */
const formData = ref<SysDictVO>(new SysDictVO());

const typeList = ref<SysDictVO[]>([]);

const treeOption = ref<SysDictVO[]>([]);

const handleQueryTree = (value,option)=>{
  console.log(value,option);
  formData.value.parentId = null;
  formData.value.typeLabel = option.label;
  apiTree(formData.value.type).then(res=>{
    if(apiUtil.isSuccessed(res)){
      treeOption.value = res.data;
    }
  })
}

/**
 * 数据验证规则
 */
const rules = {
  type: [{required: true, message: '类型必填!'}],
  typeLabel: [{required: true, message: '类型标签,用于前端展示必填!'}],
  label: [{required: true, message: '标签，用于前端展示必填!'}],
  code: [{required: true, message: '编码，全局唯一必填!'}],
}

/**
 * 操作类型
 */
const actionType = computed(() => {
  return props.dataId ? "修改" : "添加"
})

/**
 * 页面加载后执行的钩子函数
 */
onMounted(() => {
  apiTypeOptions().then(res => {
    if (apiUtil.isSuccessed(res)) {
      typeList.value = res.data;

      if (props.dataId) {
        handleGetDetail();
      } else {
        formData.value = new SysDictVO();
      }
    }
  });


})

/**
 * 保存数据
 */
const handleSave = async () => {
  try {
    const res = await apiSave(formData.value)
    if (apiUtil.isSuccessed(res)) {
      emit('successed');
      emit('close');
      apiUtil.notifySuccess(actionType.value + "成功");
    }
  } catch (error) {
    emit('close');
    apiUtil.notifyError('提交失败', error.message);
  }
}

/**
 * 查询详情
 */
const handleGetDetail = async () => {
  if (!props.dataId) return;
  try {
    const res = await apiGetDetail(props.dataId)
    if (apiUtil.isSuccessed(res)) {
      // 保留响应式连接的更新方式
      formData.value = res.data;
    }
  } catch (error) {
    apiUtil.notifyError('查询失败', error.message);
  }
}
</script>

<template>
  <div>
    <a-form
        :label-col="{ span: 3 }"
        :model="formData"
        autocomplete="off"
        name="basic"
        @finish="handleSave"
    >


      <a-form-item :rules='rules.type' label='类型' name='type'>
        <a-select
            v-model:value="formData.type"
            @change="handleQueryTree"
            :options="typeList"
        />
      </a-form-item>
      <a-form-item  label='父级' name='parentId'>
        <a-tree-select
            v-model:value="formData.parentId"
            :tree-data="treeOption"
            :fieldNames = "{value:'id'}"
        />
      </a-form-item>
      <a-form-item :rules='rules.label' label='名称' name='label'>
        <a-input v-model:value='formData.label'/>
      </a-form-item>
      <a-form-item :rules='rules.code' label='业务编码' name='code'>
        <a-input v-model:value='formData.code'/>
      </a-form-item>
      <a-form-item  label='业务值' name='bizValue'>
        <a-input v-model:value='formData.bizValue'/>
      </a-form-item>
      <a-form-item  label='排序' name='sort'>
        <a-input v-model:value='formData.sort'/>
      </a-form-item>
      <a-form-item label='扩展信息' name='extend'>
        <a-input v-model:value='formData.extend'/>
      </a-form-item>

      <a-row>
        <a-col :offset="18" :span="3">
          <a-button html-type="submit" type="primary">提交</a-button>
        </a-col>
        <a-col>
          <a-button @click="emit('close')">取消</a-button>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<style scoped>
</style>